<template>
    <div>
      <el-container>

        <el-header>
          <el-menu  class="el-menu-demo" mode="horizontal" >

            <el-image
              style="width: 120px; height: 40px ; float: left;margin-left: 10%;margin-top: 10px"
              src="https://sf1-scmcdn-tos.pstatp.com/goofy/bcy/image/logo-home.fff267.png">
            </el-image>

            <div style="margin-left: 2%;width: 300px ; float: left">
              <el-input placeholder="搜索COS、视频、用户..." v-model="input" class="input-with-select">
                <el-button slot="append" icon="el-icon-search"></el-button>
              </el-input>
            </div>


            <el-menu-item index="3" style="margin-left: 26%;float: left" ><i class="el-icon-house"></i>首页</el-menu-item>
            <el-menu-item index="4"><i class="el-icon-bell"></i>消息</el-menu-item>

            <div>
              <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" style="float: left"></el-avatar>
            </div>

            <el-button type="danger" style="float: left;margin-left: 2%"><i class="el-icon-edit-outline"></i>发布</el-button>

          </el-menu>
        </el-header>

        <el-main>

          <div>
            <template>
              <el-carousel :interval="5000" arrow="always">
                <el-carousel-item v-for="item in picList" :key="item.pic">
                  <el-image
                    :src="item.pic" style="border-radius: 5px;height: 250px"></el-image>
                </el-carousel-item>
              </el-carousel>
            </template>

          </div>
          <div style="background-color: white;height: 50px;line-height: 50px;margin-left: 9.5%;width: 1200px;font-size: 18px;border-radius: 5px;">
            <span>推荐</span>
            <span style="margin-left: 3%">关注</span>
            <span style="margin-left: 3%">榜单</span>
            <span style="margin-left: 3%">视频</span>
            <span style="margin-left: 3%">手办</span>
          </div>

          <div class="block">
            <span class="demonstration"></span>
            <el-image src="https://www.haopianyi.com/pp/p/images/banner.jpg" style="height: 150px;"></el-image>
          </div>

          <div style="height: 500px;background-color: papayawhip">
            <div style="width: 400px;height: 500px;margin-left: 25%;float: left">
              <div class="block">
                <span class="demonstration"></span>
                
                <el-image :src="shopDeatils.pic"></el-image>

              </div>
              <div style="line-height: 100px">此宝贝以有<span style="font-size: 25px;color: red">{{shopDeatils.favorite}}</span>人收藏</div>
            </div>

            <div style="width: 500px;height: 500px;margin-left: 45%;line-height: 50px">
              <div style="width: 500px;height: 50px;">现货</div>
              <div style="width: 500px;height: 50px;">商品名称:{{shopDeatils.shopName}}</div>
              <div style="width: 500px;height: 50px;">商品描述:{{shopDeatils.shopDesc}}</div>
              <div style="width: 500px;height: 50px;">商品价格:￥<span style="font-size: 25px;color: red">{{shopDeatils.price}}</span>元</div>
              <div style="width: 500px;height: 50px;">商品仅剩:{{shopDeatils.num}}件</div>
              <div style="width: 500px;height: 50px;"> <el-button type="primary" @click="collect(shopDeatils.id)">{{mylikemess}}</el-button> <el-button type="primary" @click="Mylike">我的收藏</el-button></div>
              <div style="width: 500px;height: 50px;">数量:
                <el-input-number v-model="num" @change="handleChange" :min="1" :max="shopDeatils.num" label="描述文字"></el-input-number>
              </div>
              <div style="width: 500px;height: 50px;">
                <el-button type="danger" plain>立即购买</el-button>
                <el-button type="success" plain @click="addShopCart(shopDeatils.id)">加入购物车</el-button>
                <el-tooltip class="el-icon-goods" effect="dark" content="我的购物车" placement="bottom">
                  <el-button @click="showMyShopCart"></el-button>
                </el-tooltip>
              </div>
              <div style="width: 500px;height: 50px;font-size: 10px;">本店承诺 订单险 运费险 支持七天无理由退货</div>
              <div style="width: 500px;height: 50px;font-size: 10px">支付 支付宝 花呗</div>
            </div>

          </div>
        </el-main>
      </el-container>
    </div>
</template>

<script>

  import axios from 'axios'

    export default {
        name: "toysDetails",
      data(){
          return{
            input:'',
            src:'',
            shopDeatils:{},
            num:1,
            mylikemess:'收藏宝贝',
            picList:[],
          }
      },methods:{
          findShopById:function () {
            var shopid = this.$route.query.id;
            axios.post("http://localhost/bcy-shop/shop/findById",{id:shopid}).then(res=>{
              if(res.data.code==200){
                this.shopDeatils=res.data.data
              }
            })
          },
        handleChange(value) {
          console.log(value);
        },
        addShopCart:function (id) {
          axios.post("http://localhost/bcy-shop/shop/addShopCart",{id:id,number:this.num}).then(res=>{
            if (res.data.code==200){
              alert(res.data.message)
            }
          })
        },
        showMyShopCart:function () {
          this.$router.push("/shopCart");
        },
        collect:function (id) {
          axios.post("http://localhost/bcy-shop/shop/myLike",{id:id}).then(res=>{
            if (res.data.code==200){
              alert("收藏成功")
              this.findShopById();
              this.mylikemess='已收藏'
            }else if(res.data.code==201){
              alert("您已收藏 请勿重复操作")
              this.mylikemess='已收藏'
            }else{
              alert("收藏失败")
            }
          })
        },
        Mylike:function () {
          this.$router.push("/mylike");
        },
        findCollect:function () {
          var shopid = this.$route.query.id;
          axios.post("http://localhost/bcy-shop/shop/findCollect",{id:shopid}).then(res=>{
            if (res.data.code==200){
              this.mylikemess='已收藏'
            }else{
              this.mylikemess='加入收藏'
            }
          })
        }
      },mounted() {
        this.picList=[{id:1,pic:'https://p3-bcy.byteimg.com/img/banciyuan/editor/flag/17bl6/10d975d077f211eb90d1ab98fd97748a.jpg~tplv-banciyuan-sq90.image'},
          {id:2,pic:'https://p3-bcy.byteimg.com/img/banciyuan/editor/flag/4byj/4f959ff0661e11ebbb34f34d79189fd0.png~tplv-banciyuan-sq90.image'},
          {id:3,pic:'https://p3-bcy.byteimg.com/img/banciyuan/editor/flag/4byn/cf8a414068f611eba7f6c12b719d475f.jpg~tplv-banciyuan-sq90.image'},
          {id:4,pic:'https://p9-bcy.byteimg.com/img/banciyuan/editor/flag/4byj/8361a38065cc11eb8988e56db74e2ac7.jpg~tplv-banciyuan-sq90.image'},
          {id:5,pic:'https://p3-bcy.byteimg.com/img/banciyuan/editor/flag/17big/fb7e42b0611711eba9d3135d41441025.jpg~tplv-banciyuan-sq90.image'},
          {id:6,pic:'https://p3-bcy.byteimg.com/img/banciyuan/editor/flag/17bia/4b9091d05caf11eb8d98dd5e3e9a9ce8.png~tplv-banciyuan-sq90.image'},
          {id:7,pic:'https://p9-bcy.byteimg.com/img/banciyuan/editor/flag/17bhy/b8153880531111eb9b64dfa5f5eee659.jpg~tplv-banciyuan-sq90.image'},
        ];
          this.findShopById();
          this.findCollect();
      }
    }
</script>

<style scoped>
  .el-header {
    color: #333;
    text-align: center;
    line-height: 60px;
    height: 60px;
  }
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    height: auto;
  }
</style>
